<template>
    <el-container>
      <el-header>
        <div class="topbar-logo topbar-btn">
          <a href="/"><img src="../assets/images/logo.png"></a>
        </div>
        <div class="topbar-title">
          <span style="font-size: 18px;color: #eee;">后台管理系统</span>
        </div>
        <div class="topbar-account topbar-btn">
          <el-dropdown trigger="click">
            <span class="el-dropdown-link userinfo-inner" style="color:#eee;"><i class="fa fa-user-circle-o" aria-hidden="true"></i> {{user.username}}  <i
              class="el-icon-caret-bottom"></i></span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>
                <router-link to="/context/setting/userInfo"><span style="color: #555;font-size: 14px;">个人信息</span></router-link>
              </el-dropdown-item>
              <el-dropdown-item>
                <router-link to="/context/setting/password"><span style="color: #555;font-size: 14px;">修改密码</span></router-link>
              </el-dropdown-item>
              <el-dropdown-item divided @click.native="logout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-header>
      <el-container>
        <el-aside width="201px">
          <el-menu
            router
            :default-active="defaultActive"
            class="el-menu-vertical-demo"
            background-color="#202020"
            text-color="#909399"
            active-text-color="#ffd04b"
            :unique-opened="uniqueOpened" >
            <template v-for="(item,index) in $router.options.routes[2].children" v-if="item.show&&item.children">
              <el-submenu :index="String(index)">
                <template slot="title">
                  <i class="fa" :class="item.icon" aria-hidden="true"></i>
                  <span>{{item.title}}</span>
                </template>
                <el-menu-item v-for="subItem in item.children" v-if="subItem.show" :index="$router.options.routes[2].path+'/'+item.path+'/'+subItem.path">{{subItem.title}}</el-menu-item>
              </el-submenu>
            </template>
            <template v-else-if="item.show&&!item.children">
              <el-menu-item :index="$router.options.routes[2].path+'/'+item.path">
                <i class="fa" :class="item.icon" aria-hidden="true"></i>
                <span slot="title">{{item.title}}</span>
              </el-menu-item>
            </template>
          </el-menu>
        </el-aside>
        <el-main>
             <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item v-for="item in bread">{{item}}</el-breadcrumb-item>
             </el-breadcrumb>
             <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
</template>

<script>
import { mapState, mapGetters,mapMutations,mapActions } from 'vuex'
export default {
    data(){
        return{
          uniqueOpened:true,
          defaultActive:this.$route.path
        }
    },
    components:{
    },
    mounted(){
      /*this.$store.dispatch('user/setUserInfo');*/
    },
    methods:{
      logout(){
        sessionStorage.removeItem('user');
        this.$router.push({path:'/login'});
      }
    },
    computed:{
      ...mapGetters('user', ['user']),
      bread(){
        var bread = [];
        var breadArr =  this.$route.path.split('context/')[1].split('/');
        this.$router.options.routes[2].children.forEach(item => {
          if(breadArr[0] == item.path){
            bread.push(item.title);
            if(breadArr[1]){
              item.children.forEach(subItem => {
                if(breadArr[1] == subItem.path){
                  bread.push(subItem.title);
                }
              })
            }
          }
        })
        return bread;
      }
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.el-container
{
  .el-header
  {
    height: 60px !important;
    line-height: 60px;
    background: #202020;
    .topbar-btn 
    {
      color: #fff;
    }
    .topbar-logo 
    {
      float: left;
      width: 180px;
      line-height: 60px;
    }
    .topbar-logos 
    {
      float: left;
      width: 120px;
      line-height: 60px;
    }
    .topbar-logo,
    .topbar-logos
    {
      img
      {
        height: 30px;
        margin-top: 5px;
        margin-left: 2px;
      }
    }
    .topbar-title 
    {
      float: left;
      text-align: left;
      width: 200px;
      padding-left: 10px;
      border-left: 1px solid #000;
    }
    .topbar-account 
    {
      float: right;
      padding-right: 12px;
    }
    .userinfo-inner 
    {
      cursor: pointer;
      color: #fff;
      padding-left: 10px;
    }
  }
  .el-container
  {
    position: fixed;
    top:60px;
    left:0;
    right:0;
    bottom:0;
    .el-aside
    {
      background:#202020;
      .el-menu-vertical-demo
      {
        border-right: none!important;
        border-top: 1px solid #000;
      }
    }
    .el-main
    {
      .el-breadcrumb
      {
        margin-bottom:20px;
      }
    }
  }
}
</style>
